<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="./css/base.css" rel="stylesheet">
    <link href="./css/head.css" rel="stylesheet">
    <link href="css/pet.css" rel="stylesheet">
</head>

<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/Utils.js"></script>
    <script src="js/head.js"></script>
    <script src="js/mock.js"></script>
    <script src="mock/pet.js"></script>

    <div class="nav_head"></div>

    <div class="main">
        <div class="left">
            <div class="infoBox">
                <div class="petImg">

                </div>

                <div class="petInfo">
                    <div class="petName"></div>
                    <div class="price_stock">
                        <div class="stock"></div>
                        <div class="price"></div>
                    </div>
                    <div class="numberBox">
                        <div class="sub">-</div>
                        <input class="number" type="text" value="1">
                        <div class="add">+</div>
                    </div>

                    <div class="opreation">
                        <div class="car">添加购物车</div>
                        <div class="buy">立即购买</div>
                    </div>
                </div>
            </div>

            <div class="intro">
                <div class="title">
                    <h3 style="border-bottom:2px solid rgb(66, 66, 66);">简介</h3>
                </div>

                <div class="content">

                </div>
            </div>

            <div class="commentBox">
                <div class="title">
                    <h3 style="border-bottom:2px solid  rgb(88, 88, 88);">评论</h3>
                </div>

                <div>
                    <textarea id="commentContent" placeholder="富强 民主 文明 和谐 自由 平等 公正 法治 爱国 敬业 诚信 友善" style="width:100%;height:100px;resize:none;" ></textarea>
                    <div class="button" id="sendComment" style="margin-top: 20px;">评论</div>
                </div>
            </div>
        </div>

        <div class="right">
            <div class="petBox">

            </div>
        </div>
    </div>

    <script>
        let stock = 0

        init(Mock)
        initEvent()

        let url = location.search.substring(1)
        let paramter = getURIParameter(url)
        let id =  paramter['id']
        //获取这个宠物的信息
        $.ajax({
            'url': baseUrl + 'get_pet.php?id=' + paramter['id'],
            'type': 'GET',
            'success': function (res) {
                res = JSON.parse(res)

                if (res.code == 200) {
                    let data = res.data

                    stock = res.data.stock

                    render(data)
                } else {
                    console.log("获取宠物信息失败")
                }
            }
        })

        let type = getSession("type")
        //获取同类型的宠物
        $.ajax({
            url: baseUrl + 'pet_some.php?type=' + type,
            'type': 'GET',
            'success': function (res) {
                res = JSON.parse(res)

                if (res.code == 200) {
                    let data = res.data

                    renderHotPet(data)
                } else {
                    console.log("获取同类型的宠物失败")
                }
            }
        })

        getComment()

        function getComment(){
            let pet_id = id
            let data = {pet_id}

            data = JSON.stringify(data)
            $.ajax({
                data,
                url: baseUrl + 'get_comment.php',
                type: 'POST',
                success : function(res){
                    if(res)
                        res = JSON.parse(res)

                    if(res.code == 200)
                        renderComment(res.data)
                    else alert(res.msg)
                }
            })
        }

        function render(data) {
            $('.petImg').html(`
                <img src="${baseUrl + data.image}" />
            `)

            $('.petName').html(`<b>${data.name}</b>`)

            $('.stock').html(`
                <span>库存:</span>
                <span>${data.stock}/只</span>
            `)
            $('.price').html(`
                <span>价格:</span>
                <span>￥${data.price}</span>
            `)

            $('.intro .content').text(data.intro)
        }

        function renderComment(data){
            let commentList = data

            if(!commentList)    return
            
            for(let i = 0; i < commentList.length; i++){
                $('.commentBox').append(`
                    <div class="comment">
                        <div class="userinfo">
                            <div class="avatar">
                                <img src="${baseUrl + commentList[i].avatar}" />    
                            </div>

                            <div class="info">
                                <div class="username">${commentList[i].username}</div>

                                <div class="date">${commentList[i].date}</div>

                                <div class="content">
                                    ${commentList[i].content}    
                                </div>
                            </div>
                        </div>

                    </div>
                `)
            }
        }

        function gotoPet(id){
            location.href="pet.html?id="+id
        }

        function renderHotPet(data) {
            for (let i = 0; i < data.length; i++) {
                $('.petBox').append(`
                    <div class="pet" onclick="gotoPet('${data[i].id}')">
                        <div class="image">
                            <img src="${baseUrl + data[i].image}" />
                        </div>

                        <div class="info">
                            <div class="name" style="text-align:center;"><b>${data[i].name}</b></div>
                            <div class="price">
                                <span>价格:</span>
                                <span>￥${data[i].price}</span>
                            </div>
                            <div class="stock">
                                <span>库存:</span>
                                <span> ${data[i].stock}/只</span>
                            </div>
                        </div>
                    </div>
                `)
            }
        }

        function initEvent(){
            numberEvent()

            addCarEvent()

            buyEvent()

            numberChangeEvent()

            sendCommentEvent()
        }

        //数字选择器事件
        function numberEvent(){
            $('.numberBox .add').click(function(){
                let number = $('.number')[0].value
                if(number < stock)
                    ++$('.number')[0].value
                
            })

            $('.numberBox .sub').click(function(){
                let number = $('.number')[0].value

                if(number > 0){
                    --$('.number')[0].value
                }

            })
        }

        function addCarEvent(){
            $('.car').click(function(){
                let user = getSession('user')

                if(!user){
                    alert("请先登录")
                    location.href = "login.php"
                    return
                }

                let username = user.username
                let number = $('.number').val()
                let pet_id = id
                let data = {
                    username, number, pet_id
                }

                data = JSON.stringify(data)

                $.ajax({
                    data,
                    url: baseUrl + 'add_cart.php',
                    type : 'POST',
                    success: function(res){
                        if(typeof(res) == 'string')
                            res = JSON.parse(res)

                        if(res.code == 200){
                            alert(res.msg)
                        }else alert(res.msg)
                    }
                })
            })
        }

        function buyEvent(){
            $('.buy').click(function(){
                alert("立即购买")
            })
        }

        //改变商品数量时的事件
        function numberChangeEvent(){
            $('.number').change(function(){

                 let val = Number(this.value)
                if(Number.isNaN(val)){
                    this.value = 1
                }

                else if(val > stock){
                    this.value = stock
                }

                else if(val < 0)
                    this.value = 0

            })
        }

        //发送评论事件
        function sendCommentEvent(){
            $('#sendComment').click(function(){
                let user = getSession('user')

                if(!user){
                    alert("请先登录")
                    return
                }

                let username = user.username
                let pet_id = id
                let content = $('#commentContent').val()

                if(content == ""){
                    alert("请填写评论")
                    return
                }

                let data = {
                    username, pet_id, content
                }

                data = JSON.stringify(data)

                $.ajax({
                    data,
                    url : baseUrl + 'send_comment.php',
                    type: 'POST',
                    success: function(res){
                        if(typeof(res) == 'string')
                            res = JSON.parse(res)

                        if(res.code == 200){
                            location.reload()
                            alert(res.msg)
                        }else alert(res.msg)
                    }
                })
            })
        }

    </script>
</body>

</html>